<template>
    <div class='container'>
        <div class="content">
            <div class="introduce">
                <h3 class="title">
                    1. 每日的药物是否正常服用完成？<van-icon name="volume-o" @click="play(1)"/>
                </h3>
                <div class="see">
                    <van-radio-group v-model="radio1" direction="horizontal">
                        <van-radio name="1">正常服用<van-image width="40" height="40" fit="cover" :src="p2" /></van-radio>
                        <van-radio name="2">不舒服停了<van-image width="40" height="40" fit="cover" :src="p4" /></van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="introduce">
                <h3 class="title">
                    2. 每天大便情况如何？<van-icon name="volume-o" @click="play(2)"/>
                </h3>
                <div class="see">
                    <van-radio-group v-model="radio2" direction="horizontal">
                        <van-radio name="1">一天最少一次<van-image width="40" height="40" fit="cover" :src="p1" /></van-radio>
                        <van-radio name="2">两天一次<van-image width="40" height="40" fit="cover" :src="p3" /></van-radio>
                        <van-radio name="3">两天以上一次<van-image width="40" height="40" fit="cover" :src="p4" /></van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="introduce">
                <h3 class="title">
                    3. 您觉得目前身体恢复情况如何？<van-icon name="volume-o" @click="play(3)"/>
                </h3>
                <div class="see">
                    <van-radio-group v-model="radio3" direction="horizontal">
                        <van-radio name="1">完全好了<van-image width="40" height="40" fit="cover" :src="p1" /></van-radio>
                        <van-radio name="2">基本恢复<van-image width="40" height="40" fit="cover" :src="p2" /></van-radio>
                        <van-radio name="3">还未恢复<van-image width="40" height="40" fit="cover" :src="p3" /></van-radio>
                        <van-radio name="4">感觉很差<van-image width="40" height="40" fit="cover" :src="p4" /></van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="introduce">
                <h3 class="title">
                    4. 是否需要我们给您再回电沟通？<van-icon name="volume-o" @click="play(4)"/>
                </h3>
                <div class="see">
                    <van-radio-group v-model="radio4" direction="horizontal">
                        <van-radio name="1">需要<van-image width="40" height="40" fit="cover" :src="yes" /></van-radio>
                        <van-radio name="2">不需要<van-image width="40" height="40" fit="cover" :src="no" /></van-radio>
                    </van-radio-group>
                </div>
            </div>

            <div class="bottom">
                <van-button type="primary" @click="submitQuestion">提 交</van-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <van-button @click="rebackXcX">返 回</van-button>
            </div>
        </div>

        <audio :muted="radioMuted" controls :src="audioUrl" style='display:none' ref="audioOpen"></audio>
    </div>
</template>

<!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->

<script>
export default {
    data() {
        return {
            arr:[],
            radio1:"",
            radio2:"",
            radio3:"",
            radio4:"",
            audioUrl:"",
            radioMuted:true,
            p1: require("../../../src/assets/images/p1.jpg"),
            p2: require("../../../src/assets/images/p2.jpg"),
            p3: require("../../../src/assets/images/p3.jpg"),
            p4: require("../../../src/assets/images/p4.jpg"),
            yes: require("../../../src/assets/images/yes.jpg"),
            no: require("../../../src/assets/images/no.jpg"),
        }
    },
    mounted(){
        this.arr = []
        /*this.list.forEach(item=>{
            if(localStorage.getItem(item.pdf)){
                this.arr.push(item.pdf)
            }
        })*/
    },
    methods: {
        exist(pdf){
            return this.arr.some(item=>item==pdf)
        },
        play(i){
            if (i==1){
                this.audioUrl = require("../../../src/assets/video/v1.mp3");
            }else if(i==2){
                this.audioUrl = require("../../../src/assets/video/v2.mp3");
            }else if(i==3){
                this.audioUrl = require("../../../src/assets/video/v3.mp3");
            }else if(i==4){
                this.audioUrl = require("../../../src/assets/video/v4.mp3");
            }
            this.radioMuted = false
            setTimeout(()=>{
                this.$refs.audioOpen.play()
            },150)
        },
        submitQuestion() {
            // this.$dialog.alert({
            //     title:"提示",
            //     message:"提交成功"
            // }).then(res=>{

            // })
            this.$toast({
                type:"success",
                message:"提交成功",
                forbidClick:true,
                overlay:true
            })
            setTimeout(()=>{
                this.$wx.miniProgram.navigateBack({});
            },1500)

        },
        rebackXcX(){
            this.$wx.miniProgram.navigateBack({});
        }
    }
}
</script>
<style lang="less" scoped>
.container {
    padding: 30px 8px 50px 10px;
    box-sizing: border-box;
    min-height: 100vh;
    .content {
        .introduce {
            font-size: 17px;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-between;
            margin-bottom: 20px;
            .title{
                font-size: 15px;
                // display: flex;
                // align-items: center;
                .van-icon {
                    font-size: 24px;
                    color: red;
                    transform: translateY(1px);
                }
            }
            .see {
                font-size: 15px;
                color: #10AEFF;
                display: flex;
                justify-content: space-between;
                .van-radio-group{
                    display: flex;
                    width: 100%;

                    .van-radio {
                        width: 50%;
                        box-sizing: border-box;
                        padding: 10px 0;
                        margin-right: 0 !important;
                    &::v-deep .van-radio__label {
                        display: flex !important;
                        align-items: center !important;
                        img{
                            padding-left: 10px;
                        }
                    }
                }
                }

            }
        }
        .bottom{
            margin-top: 20px;
            text-align: center;
            .van-button{
                padding: 0 30px;
                height: 40px;
                line-height: 40px;
            }
        }
    }

}
</style>
